<template>
  <div class="product-item">
    <router-link :to="'/product-detail/'+info.type+'/'+info.pId">
      <div class="img-wrapper"><img :src="info.cover" alt="" class="show-cover"></div>
      <div class="item-info pc-only"><div class="item-name">{{info.name}}<!-- <span class="item-price">￥{{info.price}}</span> --></div></div>
      <div class="item-info phone-only"><span class="item-name">{{info.name}}</span><!-- <span class="item-price">￥{{info.price}}</span> --></div>
    </router-link>
  </div>
</template>

<script>
  export default {
    name: 'product-item',
    props: {
      info: {
        type: Object,
        // default: function(){
        //   return {
        //     name: 'BLM56系列雷达料位计BLM56系列雷达料位计',
        //     price: '8000',
        //     type: 1,
        //     pId: 1
        //   }
        // }
      }
    },
    data() {
      return {

      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

  .product-item {
    display: inline-block;
    width: 250px;
    .img-wrapper {
      width: 100%;
      height: 300px;
      position: relative;
      box-sizing: border-box;
      text-align: center;
      overflow: hidden;
      border: solid 1px #dcdcdc;
      transition: all 0.6s;
      &:hover {
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.35);
      }
      .show-cover {
        width: 100%;
        max-height: 300px;
        position: absolute;
        top: 50%;
        left: 0px;
        transform: translateY(-50%);
        width: 100%;
      }
    }
    .item-info {
      margin-top: 10px;
      text-align: right;
      .item-name {
        float: left;
        text-align: left;
        margin-top: 5px;
        width: 100%;
        color: #666;
        .Mult-line(2);
        .item-price {
          float: right;
          font-size: 24px;
          color: #e02016;
        }
      }
    }
    .On-xs({
      width: 160px;
      .show-cover {
        height: 200px;
      }
      .item-info {
        box-sizing: border-box;
        width: 160px;
        height: 60px;
        margin: 0px;
        padding: 5px;
        text-align: left;
        background-color: #006d60;
        border-radius: 0px 0px 5px 5px;
        .item-name {
          .Mult-line(2);
          font-size: 14px;
          color: #fff;
        }
        .item-price {
          font-size: 18px;
          color: #fff;
        }
      }
    });
  }
</style>